<template>
  <div
    class="flex justify-center items-center"
    :style="{ width: props.width, height: props.height }"
  >
    <el-pagination
      :background="states.background"
      layout=" prev, pager, next,sizes"
      :total="total"
      v-model:page-size="states.pageSize"
      :page-sizes="[10, 20, 30, 40]"
      v-model:current-page="states.currentPage"
      @size-change="sizeChange"
      @current-change="currentChange"
    />
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref, watch } from "vue";
import { useEventHandle } from "@renderer/utils/componentEvent";
const { handleClickQuery } = useEventHandle();
let props = defineProps({
  width: {
    type: String,
    default: "",
  },
  height: {
    type: String,
    default: "",
  },
  id: {
    type: String,
    default: "",
  },
  models: {
    type: Object,
    default: () => ({}),
  },
  responseData: {
    type: Object,
    default: () => ({}),
  },
});
let total = ref(0);
watch(
  () => props.responseData,
  () => {
    if (props.responseData) {
      init();
    }
  },
  {
    deep: true,
  }
);
const states = computed({
  get: () => props.models,
  set: () => {},
}) as any;
onMounted(() => {
  if (props.responseData && props.responseData.total) {
    total.value = props.responseData.total as any;
  } else {
    total.value = 0;
  }
});
const sizeChange = (val: number) => {
  let obj = {
    pageSize: val,
    currentPage: states.value.currentPage,
  };
  if (!states.value.event.targetComponent.length) return;
  states.value.event.targetComponent.forEach((item) => {
    if (states.value.event.clickType == "query" && item.targetComponentId) {
      handleClickQuery(item.targetComponentId, props.id, obj);
    }
  });
};
const currentChange = (val: number) => {
  let obj = {
    pageSize: states.value.pageSize,
    currentPage: val,
  };
  if (!states.value.event.targetComponent.length) return;
  states.value.event.targetComponent.forEach((item) => {
    if (states.value.event.clickType == "query" && item.targetComponentId) {
      handleClickQuery(item.targetComponentId, props.id, obj);
    }
  });
};
const init = () => {
  total.value = props.responseData.total as any;
};
</script>

<style scoped lang="scss"></style>
